<template>
    <div>
    <!--                新增-->
    <el-button type="text" @click="dialogTableVisible = true" size="small">新增</el-button>
    <el-dialog title="新增文章" :visible.sync="dialogTableVisible" >
        <el-form :model="form">
            <el-form-item label="序号" :label-width="formLabelWidth">
                <el-input v-model="form.id" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="标题" :label-width="formLabelWidth">
                <el-input v-model="form.psychologyname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="内容" :label-width="formLabelWidth">
                <!--                    <el-input  autocomplete="off" v-model="form.jianjie"></el-input>-->
                <quill-editor
                        class='editor'
                        v-model="form.psychologycontent"
                        ref="myQuillEditor"
                        :options="editorOption"
                        @blur="onEditorBlur($event)"
                        @focus="onEditorFocus($event)"
                        @change="onEditorChange($event)"
                        @ready="onEditorReady($event)"
                        style="height: 200px"
                >
                </quill-editor>
            </el-form-item>
            <el-form-item label="头像" :label-width="formLabelWidth" style="text-align: left">
                <el-upload name="file"
                           v-model="form.psychologyimg"
                           :on-success="uploadImg"
                           action="http://localhost:8080/psychologyKnowledge/upload" list-type="picture-card" :auto-upload="true">
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{file}">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                        <span class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                 <i class="el-icon-zoom-in"></i>
                            </span>
                            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                                 <i class="el-icon-download"></i>
                            </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                <i class="el-icon-delete"></i>
                                </span>
                            </span>
                    </div>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogTableVisible = false">取 消</el-button>
            <el-button type="primary" @click="addPsychology">确 定</el-button>
        </div>
    </el-dialog>
    <!-- 修改 -->
    <el-button type="text" @click="dialogFormVisible2 = true" size="small">修改</el-button>
    <el-dialog title="修改文章" :visible.sync="dialogFormVisible2" >
        <el-form :model="form">
            <el-form-item label="序号" :label-width="formLabelWidth">
                <el-input v-model="form.id" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="名称" :label-width="formLabelWidth">
                <el-input v-model="form.psychologyname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="内容" :label-width="formLabelWidth">
                <!--                    <el-input  autocomplete="off" v-model="form.jianjie"></el-input>-->
                <quill-editor
                        class='editor'
                        v-model="form.psychologycontent"
                        ref="myQuillEditor"
                        :options="editorOption"
                        @blur="onEditorBlur($event)"
                        @focus="onEditorFocus($event)"
                        @change="onEditorChange($event)"
                        @ready="onEditorReady($event)"
                        style="height: 200px"
                >
                </quill-editor>
            </el-form-item>
            <el-form-item label="头像" :label-width="formLabelWidth" style="text-align: left">
                <el-upload name="file"
                           v-model="form.psychologyimg"
                           :on-success="uploadImg"
                           action="http://localhost:8080/psychologyKnowledge/upload" list-type="picture-card" :auto-upload="true">
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{file}">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                        <span class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                 <i class="el-icon-zoom-in"></i>
                            </span>
                            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                                 <i class="el-icon-download"></i>
                            </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                <i class="el-icon-delete"></i>
                                </span>
                            </span>
                    </div>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible2 = false">取 消</el-button>
            <el-button type="primary" :plain="true" @click="UpdatePsychology">保存</el-button>
        </div>
    </el-dialog>


    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                fixed
                prop="id"
                label="id"
                width="150">
        </el-table-column>
        <el-table-column
                prop="psychologyname"
                label="名称"
                width="250">
        </el-table-column>
        <el-table-column
                prop="psychologycontent"
                label="内容"
                width="300">
        </el-table-column>
        <el-table-column
                prop="psychologyimg"
                label="封面"
                width="300">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="350">
            <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" content="删除" placement="top">
                    <el-button type="danger" icon="el-icon-delete" circle @click="deleteVisible(scope.$index)"></el-button>
                </el-tooltip>
            </template>
        </el-table-column>
    </el-table>



    </div>
</template>

<script>
    export default {
        name: "PsychologyKnowledgeComponent",
        methods: {
            handleClick(row) {
                console.log(row);
            },
            addPsychology(){
            this.dialogTableVisible = true;
                //提交请求
                this.axios.post("/psychologyKnowledge/insert", {
                    id: this.form.id,
                    psychologyname: this.form.psychologyname,
                    psychologycontent: this.form.psychologycontent,
                    psychologyimg: this.form.psychologyimg,
                }).then((resp)=>{
                    const r = resp.data;
                    console.log(r);
                    this.$message.success("添加成功!")
                })
                //关闭
                this.dialogFormVisible = false;
                location.reload();
            },
            UpdatePsychology(){
                this.dialogFormVisible = true;
                this.axios.post("/psychologyKnowledge/update", {
                    id: this.form.id,
                    psychologyname: this.form.psychologyname,
                    psychologycontent: this.form.psychologycontent,
                    psychologyimg: this.form.psychologyimg,
                }).then((resp)=>{
                    const r = resp.data;
                    console.log(r);
                    this.$message.success("修改成功!")
                })
                //关闭
                this.dialogFormVisible2 = false;
                location.reload();
            },

    //        删除
            deleteVisible(index){
                this.form.id = this.tableData[index].id
                //提交请求
                this.axios.delete("/psychologyKnowledge/delete",{
                    params:{
                        id: this.form.id
                    }
                }).then((resp)=>{
                    const r = resp.data;
                    console.log(r);
                    this.$message.success("删除成功!")
                    setTimeout(()=>{this.refresh()},500)
                })
                // location.reload();
            },
            //refresh
            refresh(){
                this.axios.get("/psychologyKnowledge/selectAll")
                    .then(resp=>{
                        console.log(resp.data)
                        const r = resp.data;
                        this.tableData = r.data;
                    })
            },
    //        富文本
            // 失去焦点事件
            onEditorBlur(quill) {
                console.log('editor blur!', quill)
            },
            // 获得焦点事件
            onEditorFocus(quill) {
                console.log('editor focus!', quill)
            },
            // 准备富文本编辑器
            onEditorReady(quill) {
                console.log('editor ready!', quill)
            },
            // 内容改变事件
            onEditorChange({ quill, html, text }) {
                console.log('editor change!', quill, html, text)
                this.content = html
            },
    //        照片墙
            handleRemove(file) {
                console.log(file);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleDownload(file) {
                console.log(file);
            },
            uploadImg(resp) {
                console.log(resp.data);
                this.form.psychologyimg = resp.data
            },
    },
        data() {
            return {
                tableData: [{
                    id: '',
                    psychologyname: '',
                    psychologycontent: '',
                    psychologyimg: '',
                }],
                dialogTableVisible: false,
                dialogFormVisible: false,
                dialogFormVisible2:false,
                formLabelWidth: '120px',
                form: {
                    id:'',
                    psychologyname : '',
                    psychologycontent:'',
                    psychologyimg: '',
                },
                content: `<p>这是 vue-quill-editor 的内容！</p>`, //双向数据绑定数据
                // 富文本编辑器配置
                editorOption: {
                    modules: {
                        toolbar: [
                            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
                            ['blockquote', 'code-block'], // 引用  代码块
                            [{ header: 1 }, { header: 2 }], // 1、2 级标题
                            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
                            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
                            [{ indent: '-1' }, { indent: '+1' }], // 缩进
                            [{ direction: 'rtl' }], // 文本方向
                            [{ size: ['12px', false, '16px', '18px', '20px', '30px'] }], // 字体大小
                            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
                            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
                            [{ font: [false, 'SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }], // 字体种类
                            [{ align: [] }], // 对齐方式
                            ['clean'], // 清除文本格式
                            ['link', 'image', 'video']
                        ]
                        // 链接、图片、视频
                    },
                    placeholder: '请输入正文'
                },
            //    照片墙
                dialogImageUrl: '',
                dialogVisible: false,
                disabled1: false
            }

        },
        created() {
            this.refresh()
        }
    }
</script>

<style scoped>
</style>